<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <form @submit.prevent="demo">
                <!-- label 当点击label是会focus对应id的元素 -->
                <label for="demo">账号：</label>
                <input type="text" id="demo" v-model="userInfo.account">
                <br/><br/>
                密码：
                <input type="text" v-model="userInfo.password">
                <br/><br/>
                年龄：
                <input type="number" v-model.number="userInfo.age">
                <br/><br/>
                性别：
                男 <input type="radio" value="male" name="sex" v-model="userInfo.sex">
                女<input type="radio" value="female" name="sex" v-model="userInfo.sex">
                <br/><br/>
                爱好：
                学习<input type="checkbox" value="study" v-model="userInfo.hobby">
                打游戏<input type="checkbox" value="game" v-model="userInfo.hobby">
                吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
                <br/><br/>
                所属校区：
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="sz">深圳</option>
                    <option value="wh">武汉</option>
                </select>
                <br/><br/>
                其他信息：
                <textarea v-model.lazy="userInfo.other"></textarea>
                <br/><br/>
                <input type="checkbox" v-model="userInfo.agree">
                阅读并接受<a href="http://www.baidu.com" target="_blank">用户协议</a>
                <button>提交</button>
            </form>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.devtools = true
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    name:'Cetacean',
                    account:'',
                    password:'',
                    sex:'',
                    hobby:[],
                    city:'bj',
                    other:'',
                    agree:''
                }
            },
            methods:{
                demo(){
                    alert(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
</html>